import React, {useState, useEffect} from 'react';
import {Select,Button,Icon, message} from 'antd';
import services from '../../../services/api';
import { cloneDeep } from 'lodash';
import '../index.less'
const { Option } = Select;
export default function newCommon(props) {
  const [addCommon, setCommons] = useState([]);
  const [strategyList, setStrategyList] = useState([]);
  const [versionList, setVersionList] = useState([]);
  const [versionLists, setVersionLists] = useState([]);
  const [strateName, setStrate] = useState();
  const [strateName1, setStrate1] = useState();
  const [strateVersion, setStrateVersion] = useState();
  const [strateVersion1, setStrateVersion1] = useState();
  useEffect(() => {
    if (Object.keys(props.requestParam).length) {
      getStrategy();
    }
  },[props.requestParam])
  const { actionType } = props;
  function getStrategy() {
    const params = {}
    if (props.requestParam.event_id) {
      params.event_id = props.requestParam.event_id
      params.app_id = props.requestParam.app_id
      params.product_id = props.requestParam.product_id
    }
    if (props.echoParams) {
      params.report_id = props.echoParams.report_id
      params.send_time = props.echoParams.send_time
      params.token = props.echoParams.token
    }
    services[actionType].strategyReleaseAll({...params}).then(res => {
      if (!res.code) {
        setStrate(undefined);
        setStrate1(undefined);
        setStrateVersion(undefined);
        setStrateVersion1(undefined);
        setVersionLists([]);
        setVersionList([]);
        setStrategyList(res.data);
      } else {
        message.error(res.msg);
      }
    })
  };
  function handleChange(values) {
    setStrate(values);
    if (!values) {
      setStrateVersion(undefined);
      setVersionList([]);
      return
    }
    getVersion(values, (data) => {
      setStrateVersion(undefined);
      setVersionList(data.data);
    });
  };
  function getStrategyCode(values) {
    const codeObj = strategyList.find(it => it.strategy_id === values) || {};
    return codeObj.code || ''
  }
  function handleAddChange(values) {
    setStrate1(values)
    getVersion(values, (data) => {
      setStrateVersion1(undefined);
      setVersionLists(data.data)
    });
  };
  // 获取策略的版本
  async function getVersion(data, callback) {
    const params = {}
    if (props.requestParam.event_id) {
      params.event_id = props.requestParam.event_id
    }
    if (props.echoParams) {
      params.report_id = props.echoParams.report_id
      params.send_time = props.echoParams.send_time
      params.token = props.echoParams.token
    }
    services[actionType].allVersions({strategy_id: data, ...params, is_publish: 2}).then(res => {
       if (!res.code) {
         const obj = {
           type: 1,
           data: res.data
         }
        callback(obj)
       } else {
         message.error(res.msg);
       }
    });
  };
   function addCommons(e) {
    e.preventDefault();
    const obj = {
      id: '',
      versions: ''
    };
    const list = cloneDeep(addCommon)
    if(list.length) return
    list.push(obj);
    setCommons(list);
  }
  function handleVersion(values) {
    setStrateVersion(values);
  };
  function handleVersion1(values) {
    setStrateVersion1(values);
  };
  function handColse(index) {
    // e.preventDefault();
    setStrateVersion1();
    setStrate1();
    const lists = cloneDeep(addCommon)
    lists.splice(index, 1);
    setCommons(lists);
  }
  function submitClick() {
    if ((!strateName && strateVersion) || (!strateName && addCommon.length)) {
      message.warning('请选择策略');
      return
    }
    if ((strateName && !strateVersion) || (!strateVersion && addCommon.length)) {
      message.warning('请选择策略版本');
      return
    }
    if (addCommon.length && !strateName1) {
      message.warning('请选择要对比的策略');
      return
    }
    if (addCommon.length && !strateVersion1) {
      message.warning('请选择要对比的策略版本');
      return
    }
    let strategy_ids = [];
    let strategy_versions = [];
    if (strateName) {
      strategy_ids = [getStrategyCode(strateName)];
    }
    if (strateName1) {
      strategy_ids = [getStrategyCode(strateName),getStrategyCode(strateName1)];
    }
    if (strateVersion) {
      strategy_versions = [strateVersion];
    }
    if (strateVersion1) {
      strategy_versions = [strateVersion, strateVersion1];
    }
    const params = {
      strategy_ids,
      strategy_versions
    }
    props.submitData && props.submitData(params);
  }
  return(
    <div className='strategy-style-page'>
       <div>
        <div>
           <Select style={{ width: '120px' }} value={strateName} allowClear dropdownMatchSelectWidth={false} onChange={handleChange} placeholder="请选择策略">
              {strategyList.map((item,index) => {
                 return (<Option key={index} value={item.strategy_id}>{item.name}</Option>)
               })
              }
           </Select>
           <Select style={{ width: '120px' }} onChange={handleVersion} value={strateVersion} allowClear placeholder="请选择版本">
              {versionList.map((item,index) => {
                 return (<Option key={index} value={item.version}>{'v' + item.version}</Option>)
               })
              }
           </Select>
        </div>
         {addCommon.map((item, index)=>{
            return (
             <div key={index}>
               <p>vs</p>
               <Select style={{ width: '120px' }} value={strateName1} dropdownMatchSelectWidth={false} onChange={handleAddChange} placeholder="请选择策略">
                 {strategyList.map((it,index)=> {
                    return (<Option key={index} value={it.strategy_id}>{it.name}</Option>)
                  })
                 }
               </Select>
               <Select style={{ width: '120px' }}  onChange={handleVersion1} value={strateVersion1} allowClear placeholder="请选择版本">
                {versionLists.map(it => {
                   return (<Option key={it.id} value={it.version}>{'v' + it.version}</Option>)
                 })
                }
               </Select>
               <Icon type="close" onClick={() => handColse(index)}/>
              </div>)
         })}
       </div>
       <Button type="primary" onClick={() => submitClick()} >
         确定
       </Button>
       <p onClick={addCommons}><Icon type="plus" />添加对比项</p>
    </div>
 )
}